<template>
  <div>
    <h1>goods item</h1>
    <h1>{{ itemEgg }}</h1>
    <!-- 页面刷新 数据丢失
    渲染数据 itemEgg  undefined
    itemEgg mounted中更新一次  listDetail.find
            watch监听$route中更新一次 listDetail.find

    http://localhost:9000/#/goodsitem?id=1    
    当页面刷新 id 从分类页面传递到详情页面

    mounted中的逻辑：
    有从后台获取的所有商品的数据列表（listDetail），需要根据 传递过来的id,从所有的商品列表中找到对应的那一项listDetail

    我将筛选合适的商品的动作  放到methods getItem当中
    在methods getItem当中进行筛选的前提 listDetail

    listDetail是mounted当中的数据 不能在methods getItem中使用
    变为data当中的数据
    需要在data当中设计初始值
    this.listDetail(设计的Data中初始值)
    this.listDetail = listDetail

    当刷新时 this.listDetail 无值
    第一种情况：需要将赋值调整到筛选的上面
    第二种情况：




     -->
    <ul>
      <li v-for="(value, key, index) in itemEgg" :key="index">
        {{ key }}---{{ value }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  //listDetail赋值可以放到created中
  created() {
    let listDetail = [
      {
        id: 1,
        name: "鸡蛋",
        num: 10,
        price: 10,
      },
      {
        id: 2,
        name: "鸭蛋",
        num: 20,
        price: 20,
      },
      {
        id: 3,
        name: "鹅蛋",
        num: 30,
        price: 30,
      },
    ];
    this.listDetail = listDetail;
  },

  // mounted挂载 只执行一次
  mounted() {
    console.log("刷新页面 mounted是否执行");
    //假如 数据是从服务请求回来的
    let listDetail = [
      {
        id: 1,
        name: "鸡蛋",
        num: 10,
        price: 10,
      },
      {
        id: 2,
        name: "鸭蛋",
        num: 20,
        price: 20,
      },
      {
        id: 3,
        name: "鹅蛋",
        num: 30,
        price: 30,
      },
    ];

    this.getItem(this.$route);
    this.listDetail = listDetail;
  },
  data() {
    return {
      itemEgg: {},
      listDetail: [],
    };
  },
  methods: {
    getItem(value) {
      console.log(value.query);
      console.log("这是getItem");
      console.log(this.listDetail);
      this.itemEgg = this.listDetail.find((item) => item.id == value.query.id);
    },
  },
  watch: {
    $route: {
      // watch监听立即触发 执行在mounted之前 created完成
      handler(value) {
        console.log(111);
        console.log(value);
        this.getItem(value);
      },
      immediate: true,
    },
  },
};
</script>

<style lang="scss" scoped>
</style>